import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Flex, Form, Input } from "antd";
import axios from "axios";
import { FC } from "react";
import { useNavigate } from "react-router-dom";

const Login : FC = () =>{

    const oAuthConfig = {
        clientId: 'BookStore_App',
      };
 

 

    async function onFinish(values: any): Promise<void> {
        try {
            const response = await axios.post(`/connect/token`, {
              username: values.username,
              password: values.password,
              client_id: oAuthConfig.clientId, // 根据你的ABP配置，可能需要这个字段
              grant_type:'password'
            },{
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }} )
       
            // 处理成功的登录响应
            // 通常，你会在这里存储令牌（Token）到localStorage或Cookie中
            // 并可能重定向用户到另一个页面
            console.log('登录成功', response.data);
       
            // 示例：存储令牌到localStorage
            localStorage.setItem('authToken', response.data.result.token);
       
            // 重定向到另一个页面（可选）
            // window.location.href = '/dashboard';
       
          } catch (error) {
            // 处理登录错误
            console.error('登录错误');
          }
    }





    return (
        <Form
          name="login"
          initialValues={{ remember: true }}
          style={{ maxWidth: 360 }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your Username!' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="Username"   />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
          >
            <Input prefix={<LockOutlined />} type="password" placeholder="Password"  />
          </Form.Item>
          <Form.Item>
            <Flex justify="space-between" align="center">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
              <a href="">Forgot password</a>
            </Flex>
          </Form.Item>
    
          <Form.Item>
            <Button block type="primary" htmlType="submit">
              Log in
            </Button>
            or <a href=''  >Register now!</a>
          </Form.Item>
        </Form>
    )
}

export default Login